<!-- 数据报表 -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="card">
      <div id="myChart" :style="{width: '1200px', height: '500px'}"></div>
      <div id="myChart2" :style="{width: '500px', height: '500px'}"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getReports(1)
    // this.getReports(3)
  },
  data () {
    return {
      option_column: {
      },
      option_column2: {
      }
    }
  },
  methods: {
    async getReports(typeid) {
      const p = {
        url: `/reports/type/${typeid}`
      }
      const res = await this.$send(p)
      if (res.meta.status === 200) {
        if (typeid === 1) {
          this.option_column = res.data
          this.option_column.title = { text: '第一个表格' }
          this.drawLine()
        } else {
          this.option_column2 = res.data
          this.option_column2.title = '第2个表格'
          this.drawLine2()
        }
      }
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption(this.option_column)
    }
  },
  drawLine2() {
    // 基于准备好的dom，初始化echarts实例
    const myChart2 = this.$echarts.init(document.getElementById('myChart2'))
    // 绘制图表
    myChart2.setOption(this.option_column2)
  }
}
</script>
<style lang='less' scoped>
</style>
